<template>
  <view  class="goods_com">
    <!-- 底部弹出框 -->
    <bottom-popup :maskClick="false" ref="bottomPopup">
      <view class="popup_content">
        <!-- 头部信息 -->
        <view class="popup_header">
          <view class="popup_img" @click="handleTouchStart()">
            <image
              style="width: 100%; height: 100%; border-radius: 20rpx"
              mode="scaleToFill"
              :src="itemMap.main.hhImg || ''"
              />
              <!-- <view style="text-align: center; color: #ccc;">双击图片显示大图</view> -->
              <view style="text-align: center; color: #ccc;"></view>
          </view>
          <view style="width: 200rpx"></view>
          <view class="popup_info">
            <view class="info_item">
              <view class="label">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</view>
              <view class="item_right">{{ itemMap.main.pm || '' }}</view>
            </view>

            <view class="info_item">
              <view class="label">货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</view>
              <view class="item_right">{{ itemMap.main.huohaoname || '' }}</view>
            </view>

            <view class="info_item">
              <view class="label">商品描述：</view>
              <view class="item_des"
                >{{ itemMap.main.component || '' }} </view>
            </view>

            <view class="info_item">
              <view class="label">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</view>
              <view class="item_right">￥ {{ itemMap.main.xsprice || 0 }}</view>
            </view>

          </view>
          <text @click="closeDrawer" class="iconfont icon-shanchu1"></text>
        </view>

        <!-- 颜色选择 -->
        <view class="popup_color">
          <scroll-view style="height: 100%; " scroll-x="true">
              <view style="display: flex; height: 100%;">
                  <view style="margin: 10rpx 30rpx; position: relative;" v-for="(item, index) in itemMap.colorList" :key="index">
                      <view :class="{active: item.active}" class="color_text" @click="handleColor(item , index)"> {{ item.color }} </view>
                      <view v-if="item.num" class="badge">{{ item.num > 99 ? '+99' : item.num }}</view>
                  </view>
              </view>
          </scroll-view>
        </view>

        <!-- 中间尺码 -->
        <view class="popup_chima">
          <scroll-view style="height: 100%; " scroll-y="true">
            <view class="item_chima" v-for="(item, index) in itemMap.colorList[activeColorIndex].chimaList" :key="index">
              <view>{{ item.chima }}</view>

              <view class="item_btn_num">
                  <u-number-box @change="valChange($event, item)" inputWidth="120" buttonSize="40" integer v-model="item.num" :min="0"></u-number-box>
              </view>

            </view>
          </scroll-view>
        </view>

        <!-- 底部按钮 -->
        <view class="popup_btn">
          <view class="num_box">
            <view>购买数量：</view>
            <view style="color: #f9a94d;">{{ gmsl_com }}</view>
          </view>
          <view class="btn_box">
            <button hover-class="hover_clean" @click="handleClean">清空</button>
            <button hover-class="hover_save" @click="handleSave">确认</button>
          </view>
        </view>

      </view>
    </bottom-popup>


    <!-- 点击 图片放大  -->
    <u-popup :show="showImg" @close="showImg = false" @open="showImg = true">
        <view style="height: 100vh;">
          <customPreviewImage 
            @closeImg="closeImg"
            :show="showImg"
            :list="list"
            :currentIndex="currentIndex"
            :vertical="false">
          </customPreviewImage>
        </view>
		</u-popup>

  </view>
</template>

<script>
import BottomPopup from "@/components/custom-bottom-popup/custom-bottom-popup.vue"; // 引入自定义组件
import customPreviewImage from "@/components/custom-preview-image/custom-preview-image"; // 引入自定义组件
export default {
  components: {
    BottomPopup,
    customPreviewImage,
  },
  data() {
    return {
      itemMap: {
        main: {},
        colorList: [{chimaList: []}],
      }, // 父组件传过来的 item
      lastTap: 0, // 上一次点击时间
      showImg: false, // 是否显示图片
      currentIndex: 0, // 当前图片索引
      list: [],
      activeColorIndex: 0, // 当前选中颜色索引
    };
  },
  created() {
    // for(let i=0; i<15; i++) {
    //   this.list.push({
    //     img: `../../static/login/${i+1}.jpg`,
    //     id: i,
    //   })
    // }
  },
  mounted() { },
  computed: {
    gmsl_com() {
      return this.itemMap.colorList.reduce((total, item) => {
        let val = Number(item.num) || 0
        return total + val
      }, 0)
    }
  },
  methods: {
    handleClean() {
      this.itemMap = {
        ...this.itemMap,
        colorList: this.itemMap.colorList.map(i => ({
          ...i, 
          num: 0,
          chimaList: i.chimaList.map(z => ({...z, num: 0}))
        }))
      }
    },
    handleSave() {
      let backData= {
        ...this.itemMap,
        hjsl: this.gmsl_com
      }
      this.$emit('childAddGoods', backData)
    },
    closeDrawer() { // 关闭底部弹出框
      this.$refs.bottomPopup.closePopup();
    },
    goDetailPopup(mainData, index) { // 打开底部弹出框
      this.activeColorIndex = index
      this.itemMap = {
        ...mainData,
        colorList: mainData.colordetail.map((i, j) => ({
          ...i, 
          active: j==index ? true : false, num: 0, 
          chimaList: mainData.chimadetail.map((z, y) => ({...z, num: 0, color: i.color })) 
        })),
      }

      this.list = [ {img: mainData.main.hhImg, id: 1}  ]
      this.$refs.bottomPopup.showPopup();
    },

    changeNum(mainData) {
      this.itemMap = mainData
      this.list = [ {img: mainData.main.hhImg, id: 1}  ]
      this.$refs.bottomPopup.showPopup();
    },
    handleColor(item , index) {
      this.activeColorIndex = index
      this.itemMap.colorList = this.itemMap.colorList.map(i => ({...i, active: i.color == item.color ? true : false}))
    },

    valChange(e, item) {
      let color = item.color
      let colorTotalList = this.itemMap.colorList.filter(i => i.color == color)
      let filterCurColorList = colorTotalList[0].chimaList.filter(o => o.chima != item.chima)
      let sum = filterCurColorList.reduce((pre, cur) => {
        let val = Number(cur.num) || 0
        return pre + val
      }, 0)
      let totalNum = sum + e.value
      this.itemMap = {
        ...this.itemMap,
        colorList: this.itemMap.colorList.map(i => {
          return {
            ...i,
            num: i.color == color ? totalNum : i.num
          }
        })
      }
    },






    // 点击图片 方法
    // 双击事件的处理函数
    handleTouchStart() {
      return
        const currentTime = new Date().getTime(); // 获取当前点击的时间戳
        const timeDifference = currentTime - this.lastTap; // 计算两次点击的时间差
        if (timeDifference < 300 && timeDifference > 0) { // 300ms以内为双击
            this.currentIndex = 0
            this.showImg = true
        }
        this.lastTap = currentTime; // 更新最后一次点击的时间戳
    },

    // 图片切换后拿到的图片位置
      closeImg() {
				console.log('===== 2222 管')
				this.showImg = false
			}

  },
};
</script>

<style lang="less" scoped>
.goods_com {
  font-size: 16rpx;

    // 底部弹出框
  .popup_content {
    height: 75vh;
    display: flex;
    flex-direction: column;

    // 头部
    .popup_header {
      display: flex;
      position: relative;
      padding: 20rpx 20rpx 0;
      .popup_img {
        position: absolute;
        width: 200rpx;
        height: 200rpx;
        bottom: 0rpx;
      }

      .popup_info {
        position: relative;
        flex: 1;
        margin-left: 20rpx;
        overflow: hidden;

        .info_item {
          display: flex;
          align-items: center;
          padding-bottom: 5rpx;

          .item_right {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .label {
            color: #a2a2a2;
          }

          .item_des {
            flex: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 显示三行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }
        }

        
      }
      .iconfont {
          font-size: 40rpx;
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          color: #9a9a9a;
          color: rgba(154, 154, 154, 0.8);
        }
    }

    // 颜色
    .popup_color {
      margin-top: 30rpx;
      width: 100%;

      .color_text {
        font-size: 20rpx;
        padding: 10rpx;
        white-space: nowrap;
        padding-bottom: 5rpx;
        border-bottom: 5rpx solid #bbbbbb;
      }

      .active {
        color: #ff8b05;
        border-bottom: 5rpx solid #ff8b05;
      }

      .badge {
        position: absolute;
        top: -10rpx;
        right: -15rpx;
        background: #ff8b05;
        color: #fff;
        border-radius: 12rpx;
        padding: 2rpx 6rpx;
      }

    }

    // 尺码
    .popup_chima {
      flex: 1;
      background-color: #fff;
      overflow: auto;
      border-top: 1rpx dashed #ccc;
      padding: 0 20rpx;

      .item_chima {
        font-size: 25rpx;
        padding: 10rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx dashed #ccc;

        .item_btn_num {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .iconfont {
            font-size: 40rpx;
          }
          input {
            text-align: center;
            font-size: 20rpx;
            width: 150rpx;
          }
        }
      }

    }

    // 底部按钮
    .popup_btn {
      display: flex;
      align-items: center;
      border-top: 1rpx solid #ccc;

      .num_box {
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 20rpx;
        font-size: 20rpx;
      }

      .btn_box {
        display: flex;
        align-items: center;

        button {
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          border-radius: 0;
          height: 60rpx;
          background: #a4adb3;
          width: 90rpx;
        }
        button:nth-child(2) {
          background: #f9a94d;
          width: 190rpx;
        }

        .hover_save {
          background: #cd8c42 !important;
        }
        .hover_clean {
          background: #888f94;
        }
      }
    }
  }
}


</style>
